<template>
  <div class="cate">
    <!-- 导航组件 -->
    <my-nav-bar title="分类"></my-nav-bar>
    <!-- 搜索组件 -->
    <my-search></my-search>
    <div class="scroll_ct">
      <van-sidebar v-model="active">
        <van-sidebar-item
          v-for="(item, index) in cateList"
          :key="index"
          :title="item.cat_name"
        />
      </van-sidebar>
      <div class="right">
        <!-- <section v-for="(item, index) in rightList" :key="index">
          <h4>{{ item.cat_name }}</h4>
          <van-grid :border="false" :column-num="3">
            <van-grid-item
              :icon="n.cat_icon"
              :text="n.cat_name"
              v-for="(n, i) in item.children"
              :key="i"
            />
          </van-grid>
        </section> -->
        <section v-for="(item, index) in cateList[active]?.children" :key="index">
          <h4>{{ item.cat_name }}</h4>
          <van-grid :border="false" :column-num="3">
            <van-grid-item
              :icon="n.cat_icon"
              :text="n.cat_name"
              v-for="(n, i) in item.children"
              :key="i"
              @click="jump(n)"
            />
          </van-grid>
        </section>
      </div>
    </div>
  </div>
</template>

<script>
// import myNavBar from "../../components/myNavBar.vue";
import mySearch from "../../components/mySearch.vue";
import { getCate } from "../../api/home";
export default {
  data() {
    return {
      cateList: [], // 分类的数据
      active: 0, // 选中的标签的索引
      // rightList: [], // 右边的数据
    };
  },
  created() {
    getCate().then((res) => {
      // 获取分类的数据
      // console.log(res);
      this.cateList = res.message;
      // this.rightList = res.message[0].children; // 默认展示的右边的数据
    });
  },
  // computed: {
  //   rightList() {
  //     return this.cateList[this.active]?.children;
  //   },
  // },
  // watch: {
  //   active(newVal) {
  //     // 监听索引的变化
  //     this.rightList = this.cateList[newVal].children;
  //   },
  // },
  methods: {
    jump(val) {
      // 跳转的函数
      this.$router.push(`/goods?id=${val.cat_id}`);
    },
  },
  components: { mySearch },
};
</script>

<style lang="scss" scoped>
.cate {
  .scroll_ct {
    height: calc(100% - 100px);
    overflow-y: auto;
    display: flex;
    .right {
      flex: 1;
      overflow-x: hidden;
      h4 {
        text-align: center;
        font-size: 18px;
        line-height: 50px;
      }
    }
  }
  .van-sidebar-item--select:before {
    background-color: red;
  }
}
</style>
